<template>
  <div class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="意见反馈" />
    <div class="feedback">
      <div class="header box">
        <div class="title">请选择反馈问题的类型</div>
        <div class="tag">
          <div
            class="tag-item"
            :class="{active: activeIndex === index}"
            v-for="(item, index) in tagList"
            :key="index"
            @click="handleChooseTag(index)"
          >{{item}}</div>
        </div>
      </div>
      <div class="main box">
        <div class="title">详细说明</div>
        <div class="text-box">
          <textarea class="textarea" :show-confirm-bar="false" v-model="inputContent" :maxlength="maxlength" />
          <text class="input-num">{{inputLength}}/{{maxlength}}</text>
        </div>
        <div class="title">
          添加图片
          <text class="tip-title">(选填，提供问题截图)</text>
        </div>
        <div class="flex">
          <div
            class="img-box"
            @click="handlePreview(index)"
            v-for="(item, index) in loadImg"
            :key="index"
          >
            <image class="flex-img" :src="item.url + item.filename" mode="scaleToFill" />
            <text class="delete iconfont icon-shanchu1" @click.stop="handleDeletePhoto(index)"></text>
          </div>
          <div class="upload" @click="handleUploadPhoto">
            <text class="iconfont icon-wuuiconxiangjifangda"></text>
          </div>
        </div>
      </div>
      <div class="submit" @click="handleSubmit">提交</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tagList: [],
      activeIndex: 0, // 选中标签的下标
      inputContent: "",
      maxlength: 300,
      loadImg: []
    };
  },
  onLoad(e) {
    let id = e.id;
    if (id) {
      this.tagList = ["平台建议", "订单问题", "投诉律师"];
      this.lawyer_id = id;
      this.activeIndex = 2
    } else {
      this.tagList = ["平台建议", "订单问题"];
    }
    if (!uni.getStorageSync("token")) {
      this.$store.dispatch("login", "请登录再操作!");
    }
  },
  computed: {
    inputLength() {
      return this.inputContent.length;
    },
    previewImage() {
      return this.loadImg.map(element => {
        return element.url + element.filename;
      });
    }
  },
  methods: {
    // 查看图片
    handlePreview(index) {
      let that = this;
      uni.previewImage({
        current: index,
        urls: that.previewImage,
        complete(res) {
          console.log(res);
        }
      });
    },
    // 提交
    async handleSubmit() {
      const that = this;
      if (this.inputContent.trim().length == 0) {
        uni.showToast({
          mask: true,
          icon: "none",
          title: "请填写详细说明",
          duration: 2000
        });
        return;
      }
      const res = await this.$gh
        .request("member.info", {
          data: {
            op: "addFeedback",
            type: that.activeIndex + 1,
            content: that.inputContent,
            img: JSON.stringify(that.loadImg),
            lawyer_id: that.lawyer_id || ""
          }
        })
        .catch(err => {
          if (err.code == 41009) {
            that.$store.dispatch("login", err.message);
          }
        });
      // 提交请求成功后
      if (res) {
        uni.showToast({
          mask: true,
          icon: "none",
          title: "提交成功",
          duration: 2000
        });
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/my/my"
          });
        }, 2000);
      }
    },
    handleDeletePhoto(index) {
      this.loadImg.splice(index, 1);
    },
    async handleUploadPhoto() {
      let that = this;
      if (that.loadImg.length == 3) {
        uni.showToast({
          mask: true,
          icon: "none",
          title: "只能上传3张图片",
          duration: 2000
        });
        return;
      }
      // 选择图片
      let tempFilePaths = await this.$gh.chooseImage();
      // 循环上传
      tempFilePaths.forEach((element, index) => {
        uni.uploadFile({
          url: that.$store.state.baseUrl + "util.wx_uploader", //仅为示例，非真实的接口地址
          filePath: element,
          name: "file",
          success: uploadFileRes => {
            const data = JSON.parse(uploadFileRes.data);
            const { filename, url } = data.data.list;
            that.loadImg.push({ url, filename });
            uni.showToast({
              icon: 'success',
              title: '图片上传成功',
              duration: 2000
            });
          },
          fail(err) {
            console.log(err);
          }
        });
      });
    },
    handleChooseTag(index) {
      this.activeIndex = index;
    }
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.feedback {
  .title {
    font-size: 30rpx;
    color: @deep-color;
    margin-bottom: 25rpx;
  }
  .box {
    padding: 25rpx;
    background-color: #fff;
    margin: 10rpx 0;
  }
  .header {
    .tag {
      .flex();
      .tag-item {
        padding: 5rpx 10rpx;
        border: 1px solid @font-color;
        font-size: 26rpx;
        margin-right: 10rpx;
        color: @font-color;
      }
      .active {
        border: 1px solid #849aff;
        color: #849aff;
      }
    }
  }
  .main {
    .text-box {
      position: relative;
      .textarea {
        box-sizing: border-box;
        width: 100%;
        height: 280rpx;
        padding: 23rpx;
        font-size: 26rpx;
        margin-bottom: 35rpx;
        border: 1px solid @font-color;
      }
      .input-num {
        position: absolute;
        bottom: 25rpx;
        right: 25rpx;
        font-size: 24rpx;
        color: @font-color;
      }
    }
    .tip-title {
      font-size: 24rpx;
      color: @font-color;
    }
    .flex {
      .flex();
      flex-wrap: wrap;
      .img-box {
        position: relative;
        width: 30%;
        height: 23vw;
        margin-right: 5%;
        margin-bottom: 10rpx;
        &:nth-child(3n) {
          margin-right: 0;
        }
        .flex-img {
          width: 100%;
          height: 100%;
        }
        .delete {
          position: absolute;
          top: 0%;
          right: 0%;
          // transform: rotate(45deg);
          color: #fff;
          font-size: 30rpx;
        }
      }
      .upload {
        .gh-center();
        width: calc(30% - 2px);
        height: 23vw;
        border: 1px solid @font-color;
        margin-bottom: 10rpx;
        .icon-wuuiconxiangjifangda {
          color: #dbdbdb;
          font-size: 50rpx;
        }
      }
    }
  }
  .submit {
    width: 620rpx;
    margin: 75rpx auto;
    padding: 15rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: @theme-color;
  }
}
</style>